@charset 'utf-8';

*{
    margin: 0;
    padding: 0;
    list-style: none;
}

html,body,.web{
    width: 100%;
    height: 100%;
}

.swiper-container{
    width: 100%;
    height: 100%;
}

.page{
    width: 100%;
    height: 100%;
    text-align: center;
    font-size: 50px;
}

.page1{
    background: deepskyblue;
}

.page2{
    background: deeppink;
}

.page3{
    background: greenyellow;
}

.daren{
    animation: ybz 300ms;
    width: 70%;
    margin: 0 auto;
   transform-origin: center center;
}
@keyframes ybz{
    0%{
        transform: translateY(-100%);
    }
    
    25%{
        transform: rotateZ(-45deg);
        transform: translateX(-50px);
    }
    
    50%{
//     transform: rotateZ(0deg);
        transform: translateX(50px); 
    }
    
    75%{
        transform: rotateZ(45deg);
//      transform: translateX(50px);
    }
    
    100%{
        
         transform: rotateZ(0deg);
        transform: translateY(0);
    }
}
